<template>
    <div>
        <!-- <div class="tag-menu" v-show="show" :style="{ top: y + 10 + 'px', left: x + 10 + 'px' }"> -->
        <!-- <div class="mask" @click.self="hide" v-show="show">
        </div> -->
        <div v-show="show" class="tag-menu" :style="{ top: pos.top + 10 + 'px', left: pos.left + 10 + 'px' }">
            <ul>
                <li @click="clickHandle(item.command)" v-for="item in renderedMenu" :key="item.command">
                    <i :class="item.icon"></i>
                    <span>{{ item.text }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
        // x: {
        //     type: Number,
        // },
        // y: {
        //     type: Number
        // }

    },
    data() {
        return {
            pos: {
                top: 0,
                left: 0
            },
            renderedMenu: [],
            menuList: [
                { text: '刷新页面', icon: 'el-icon-refresh-right', command: 'refresh' },
                { text: '关闭当前', icon: 'el-icon-close', command: 'close-current' },
                { text: '关闭其它', icon: 'el-icon-circle-close', command: 'close-other' },
                { text: '关闭左侧', icon: 'el-icon-back', command: 'close-left' },
                { text: '关闭右侧', icon: 'el-icon-right', command: 'close-right' },
                { text: '全部关闭', icon: 'el-icon-circle-close', command: 'all' },
            ],
            index: 0,
            max: 0
        }
    },
    watch: {
        index: {
            handler(newVal) {
                if (newVal === 0) {
                    this.renderedMenu = this.menuList.filter((item, index) => index !== 2 && index !== 3)
                } else if (newVal === 1) {
                    // 如果既是第2个又是最后一个
                    if (newVal === this.max) {
                        this.renderedMenu = this.menuList.filter((item, index) => index !== 4 && index !== 3)
                    } else {
                        // 如果是第2个但是不是最后一个
                        this.renderedMenu = this.menuList.filter((item, index) => index !== 3)
                    }
                } else if (newVal === this.max) {
                    // 如果是最后一个
                    this.renderedMenu = this.menuList.filter((item, index) => index !== 4)
                } else {
                    // 如果是中间
                    this.renderedMenu = this.menuList;
                }
            },
            immediate: true
        }
    },
    methods: {
        fnnnnnnn() {
            console.log('子组件内部的方法')
        },
        setPosition(x, y) {
            this.pos = { left: x, top: y }
        },
        hide() {
            this.$emit('hide')
        },
        giveIndex(index, max) {
            this.index = index;
            this.max = max - 1;
        },
        clickHandle(cmd) {
            // 判断cmd ，执行对应的逻辑
            // switch (cmd) {
            //     case 'refresh':
            //         this.$router.push(this.$route.fullPath)
            //         break;
            //     case 'close-current':
            //         // 通知父组件 删除当前这个tag
            //         this.$emit('close-current', this.index)
            //         break;
            // }

            // 无论点击的是谁，直接交给父组件进行处理
            this.$emit('item-click', this.index, cmd)
        }
    }
}
</script>
 
<style lang = "less" scoped>
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tag-menu {
    position: fixed;
    z-index: 2;
    // min-width: 120px;
    // padding: 20px;
    box-shadow: 0 0 4px 2px #ccc;
    // min-height: 200px;
    background-color: #fff;

    li {
        font-size: 12px;
        line-height: 16px;
        padding: 10px;
        cursor: pointer;

        &:hover {
            background-color: #ccc;
        }
    }
}
</style>